<template>
    <!-- 聊天页面 -->
  <div class="IM">
      <div class="right">
          <div class="consult flex aic">
          <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
          alt=""
          />
          <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
          alt=""
          />
          <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
          alt=""
          />
          </div>
          <div class="info pl-10 pr-10 f14">
          <div class="flex mt-20">
          <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
              alt=""
          />
          <p class="what ml-10 mt-10">芊妙机器人</p>
          </div>
          <div class="flex mt-20 jc-e">
          <p class="what mr-10 mt-10">芊妙机器人</p>
          <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
              alt=""
          />
          </div>
          <div class="flex mt-20">
          <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673675691&t=dcdcdb2297f6a373d82936bf1fb2a5e2"
              alt=""
          />
          <p class="what ml-10 mt-10">芊妙机器人</p>
          </div>
          </div>
          <div class="chat pl-10 pr-10 flex fdc">
          <el-input
          v-model="chat"
          :autosize="{ minRows: 5, maxRows: 4 }"
          type="textarea"
          placeholder="please enter"
          />
          <el-button class="mt-10 flex jc-e" type="primary" round
          >dispatch</el-button
          >
      </div>
      </div>
  </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
// 聊天页面
.IM {
      width: 25%;
      height: 100%;
      margin-left: 10px;
      margin-right: 10px;
      background-color: #fff;
      width: 25%;
      flex-shrink: 0;
      box-shadow: 1px -1px 5px rgba(168, 168, 168, 0.678);
      position: relative;

      .consult {
        background-color: #58aafc;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 10px;
        }
      }

      .info {
        height: 70vh;
        overflow-y: auto;
        padding-bottom: 20px;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          // margin: 10px;
        }

        .what {
          border: 1px solid #a5a5a5;
          padding: 5px;
          border-radius: 10px;
          height: auto;
        }
      }

      .info::-webkit-scrollbar {
        width: 5px;
      }

      .info::-webkit-scrollbar-thumb {
        background-color: #cccccc;
        border-radius: 10px;
      }

      .chat {
        // height: 100px;
        position: absolute;
        bottom: 10px;
        width: 100%;
      }
    }
</style>